<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 发送请求-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <td>
                <el-tag size="mini">数据库用户名：</el-tag>
            </td>
            <td>
                <el-input size="mini" v-model="db.username"></el-input>
            </td>
        </tr>
        <tr>
            <td>
                <el-tag size="mini">数据库密码：</el-tag>
            </td>
            <td>
                <el-input size="mini" v-model="db.password"></el-input>
            </td>
        </tr>
        <tr>
            <td>
                <el-tag size="mini">数据库地址：</el-tag>
            </td>
            <td>
                <el-input size="mini" v-model="db.url">
                    <template slot="prepend">jdbc:mysql://</template>
                    <template slot="append">
                        ?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
                    </template>
                </el-input>
            </td>
        </tr>
    </table>
    <div style="display: flex">
        <el-button type="primary" size="mini" @click="connect" :disabled="!connectBtnEnabled">连接数据库</el-button>
        <div style="color: #ff1a29;font-weight: bold">*{{msg}}*</div>
        <el-input v-model="packageName" size="mini" style="width: 300px"></el-input>
        <el-button type="primary" size="mini" @click="config">配置</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" border="true">
        <el-table-column
                prop="tableName"
                label="表名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="modelName"
                label="实体类名"
                width="180">
            <template slot-scope="scope">
                <el-input v-model="scope.row.modelName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                prop="serviceName"
                label="Service名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.serviceName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                prop="mapperName"
                label="Mapper名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.mapperName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                prop="controllerName"
                label="Controller名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.controllerName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                prop="packageName"
                label="Package名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.packageName"></el-input>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-button @click="generateCode" type="success">生成代码</el-button>
        <div >{{realPath}}</div>
        <div style="color: #ff1a29;font-weight: bold">{{generateResult}}</div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                realPath: '',
                generateResult: '',
                tableData: '',
                packageName: 'com.an.test',
                msg: "数据库未连接",
                connectBtnEnabled: true,
                db: {
                    username: "root",
                    password: "123456",
                    url: "localhost:3306/test"
                }
            };
        },
        methods: {
            generateCode(){
                let _this = this;
                axios.post("/generateCode", this.tableData)
                    .then(function (response) {
                        _this.realPath = response.data.obj;
                        _this.generateResult = response.data.msg;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            config() {
                let _this = this;
                axios.post("/config", {packageName: this.packageName})
                    .then(function (response) {
                        _this.msg = response.data.msg;
                        _this.tableData = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            connect() {
                let _this = this;
                this.db.url = "jdbc:mysql://" + this.db.url + "?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai";
                axios.post("/connect", this.db)
                    .then(function (response) {
                        _this.msg = response.data.msg;
                        _this.db = {
                            username: "root",
                            password: "123456",
                            url: "localhost:3306/test"
                        };
                        _this.connectBtnEnabled = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        }
    })
</script>
</body>
</html>